import { history } from 'umi';
import React, { useState } from 'react';
import { Flex, NavBar, Image, Search, Empty, Card, Sticky } from 'react-vant';
import { SafeArea } from 'antd-mobile';
import { Female } from '@icon-park/react';
import './search.less';

const goBack = () => {
  history.back();
}
const goPartner = () => {
  history.push('/partner');
}

export default function SearchPage() {
  const [searchValue, setSearchValue] = useState('');
  return (
    <div className='search'>
      <NavBar title='搜索' leftText='返回' onClickLeft={goBack} />
      <Sticky>
        <Search className='search-box' value={searchValue} onChange={setSearchValue}
                placeholder='搜索昵称' shape='round' autoFocus clearable />
      </Sticky>
      <div className='search-tags container'>
        <h4 className='title'>按个人标签搜索</h4>
        <div className='tag-list'>
          <div className='tag'>密室达人</div>
          <div className='tag'>酒搭子</div>
          <div className='tag'>氛围制造者</div>
          <div className='tag'>玩乐达人</div>
          <div className='tag'>御姐</div>
          <div className='tag'>萝莉</div>
          <div className='tag'>模特</div>
          <div className='tag'>在校学生</div>
          <div className='tag'>电竞少女</div>
          <div className='tag'>亲密女友</div>
          <div className='tag'>情感导师</div>
        </div>
      </div>
      <div className='search-results container'>
        <h4 className='title'>搜索结果</h4>
        <Card round className='partner-card' onClick={goPartner}>
          <Card.Body>
            <Flex direction='row'>
              <Flex.Item span={6} className='partner-avatar'>
                <Image round width='60' height='60' fit='cover'
                       src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg' />
                <div className='auth-badge'>真人认证</div>
              </Flex.Item>
              <Flex.Item span={18}>
                <Flex direction='column' gutter={5}>
                  <Flex.Item>
                    <Flex justify='between' align='center'>
                      <Flex.Item>
                        <Flex gutter={10} align='center'>
                          <Flex.Item><h3 className='partner-name'>小熊</h3></Flex.Item>
                          <Flex.Item>
                            <Flex gutter={2} align='center' className='partner-age'>
                              <Flex.Item><Female className='gender-icon' theme='outline' /></Flex.Item>
                              <Flex.Item>23</Flex.Item>
                            </Flex>
                          </Flex.Item>
                        </Flex>
                      </Flex.Item>
                      <Flex.Item className='partner-status'>
                        <div className='kong'><i className='dot'></i>空闲</div>
                      </Flex.Item>
                    </Flex>
                  </Flex.Item>
                  <Flex.Item className='partner-details'>
                    170cm <span>|</span> 48kg <span>|</span> 射手座
                  </Flex.Item>
                  <Flex.Item className='partner-tags'>
                    <div className='tag tag1'>密室达人</div>
                    <div className='tag tag2'>酒搭子</div>
                    <div className='tag tag3'>氛围制造者</div>
                  </Flex.Item>
                  <Flex.Item className='partner-photos'>
                    <Flex gutter={10}>
                      <Flex.Item span={8}><Image radius='6' fit='cover' height='96'
                                                 src='//res.dayupp.com/partner/2f49c01e5bfa4a43576c82b0ce11aa87.jpg' /></Flex.Item>
                      <Flex.Item span={8}><Image radius='6' fit='cover' height='96'
                                                 src='//res.dayupp.com/partner/050b7f06be14e84c6b82d06752dbca39.jpg' /></Flex.Item>
                      <Flex.Item span={8}><Image radius='6' fit='cover' height='96'
                                                 src='//res.dayupp.com/partner/6546da46f1d883b88b25593baa6d1b88.jpg' /></Flex.Item>
                    </Flex>
                  </Flex.Item>
                </Flex>
              </Flex.Item>
            </Flex>
          </Card.Body>
        </Card>
        <Card round className='partner-card' onClick={goPartner}>
          <Card.Body>
            <Flex direction='row'>
              <Flex.Item span={6} className='partner-avatar'>
                <Image round width='60' height='60' fit='cover'
                       src='//res.dayupp.com/partner/92ecdf73508293cf9d3ac70518b32925.jpg' />
                {/*<div className='auth-badge'>真人认证</div>*/}
              </Flex.Item>
              <Flex.Item span={18}>
                <Flex direction='column' gutter={5}>
                  <Flex.Item>
                    <Flex justify='between' align='center'>
                      <Flex.Item>
                        <Flex gutter={10} align='center'>
                          <Flex.Item><h3 className='partner-name'>真真</h3></Flex.Item>
                          <Flex.Item>
                            <Flex gutter={2} align='center' className='partner-age'>
                              <Flex.Item><Female className='gender-icon' theme='outline' /></Flex.Item>
                              <Flex.Item>22</Flex.Item>
                            </Flex>
                          </Flex.Item>
                        </Flex>
                      </Flex.Item>
                      <Flex.Item className='partner-status'>
                        <div className='busy'><i className='dot'></i>忙碌</div>
                      </Flex.Item>
                    </Flex>
                  </Flex.Item>
                  <Flex.Item className='partner-details'>
                    165cm <span>|</span> 49kg <span>|</span> 摩羯座
                  </Flex.Item>
                  <Flex.Item className='partner-tags'>
                    <div className='tag tag1'>御姐</div>
                    <div className='tag tag2'>电竞少女</div>
                    <div className='tag tag3'>情感导师</div>
                  </Flex.Item>
                  <Flex.Item className='partner-photos'>
                    <Flex gutter={10}>
                      <Flex.Item span={8}><Image radius='6' fit='cover' height='96'
                                                 src='//res.dayupp.com/partner/880904ffc317c2a91df9a7c12a17071a.jpg' /></Flex.Item>
                      <Flex.Item span={8}><Image radius='6' fit='cover' height='96'
                                                 src='//res.dayupp.com/partner/cef1e1d229f2f5aaeed3088d8944ab93.jpg' /></Flex.Item>
                      <Flex.Item span={8}><Image radius='6' fit='cover' height='96'
                                                 src='//res.dayupp.com/partner/f0ec176a1f3f3a73c3079a15f91f10d2.jpg' /></Flex.Item>
                    </Flex>
                  </Flex.Item>
                </Flex>
              </Flex.Item>
            </Flex>
          </Card.Body>
        </Card>
      </div>

      <Empty image='search' description='未找到符合条件的结果' /> {/*“空状态”默认不展示，仅当无搜索结果时展示*/}
      <SafeArea position='bottom' />
    </div>
  );
}
